
<template>

  <div class="ticket-view">
    <van-nav-bar
        title="我的申请"
        left-arrow
        @click-left="onBack"
        fixed
    />
    <!-- 工单列表 -->
    <div class="ticket-list">
      <div v-for="ticket in data" :key="data.id"  @click="jhxq(ticket.id)" class="ticket-item">
        <div class="ticket-header" >
          <div class="ticket-id">工单编号：{{ ticket.id}}</div>
          <!--          标签状态右对齐-->
          <div class="ticket-status">
            <van-tag v-if="ticket.shippingstatus===1" type="danger" >已完成</van-tag>
            <van-tag v-if="ticket.shippingstatus==2" type="warning">已接单</van-tag>
            <van-tag v-if="ticket.shippingstatus==3" type="success">已退回</van-tag>
          </div>
        </div>
        <div class="ticket-content">
          <div class="ticket-info">
            <div class="ticket-header">执行人:{{ticket.shippingreportname}} </div>
            <div class="ticket-header">联系电话:{{ticket.shippingphone}} </div>
            <div class="ticket-id">生成时间：{{ ticket.shippinggenerationtime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  name: "Workorderbjjh",
  data() {
    return {
      data: [],
    }
  },
  created() {
    this.list();
  },
  methods: {


    jhxq(id){
      // console.log(this.key);
      this.$router.push({path: '/details', query: {id:id}});
    },

    onBack() {
      this.$router.push('/medical');
    },

    list(){
      const item = localStorage.getItem('aa');
      let aaaaa=JSON.parse(item);
      let name=aaaaa['username'];

      this.axios.post(`http://localhost:9999/api-central-service/shipping/listname?name=`+name).then(res => {
        this.data = res.data.data;
        console.log(this.data);
      })
    }

  }
}
</script>
<style scoped>


.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  top: 30px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}

</style>